<template>
  <div class="flex justify-between items-center border-b border-gray-200 pb-4 mb-4">
    <div class="flex items-center space-x-4">
      <h2 class="text-xl font-bold">党员信息管理</h2>
      <n-space>
        <n-tag type="info">总计: {{ totalCount }} 人</n-tag>
        <n-tag type="success">当前页: {{ currentPageCount }} 人</n-tag>
        <n-tag type="default" v-if="hasActiveFilters">已启用筛选</n-tag>
        <n-tag type="default" v-if="hasActiveSorter">已启用排序</n-tag>
      </n-space>
    </div>
    
    <!-- 收起控制按钮移到标题行 -->
    <n-button 
      text 
      type="primary"
      @click="toggleControls"
      class="flex items-center"
    >
      <template #icon>
        <n-icon>
          <SettingsIcon v-if="!showControls" />
          <ChevronUpIcon v-else />
        </n-icon>
      </template>
      {{ showControls ? '收起控制面板' : '展开控制面板' }}
    </n-button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { NSpace, NTag, NButton, NIcon } from 'naive-ui'
import {
  Settings as SettingsIcon,
  ChevronUp as ChevronUpIcon
} from '@vicons/tabler'

const props = defineProps({
  totalCount: {
    type: Number,
    default: 0
  },
  currentPageCount: {
    type: Number,
    default: 0
  },
  hasActiveFilters: {
    type: Boolean,
    default: false
  },
  hasActiveSorter: {
    type: Boolean,
    default: false
  },
  showControls: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['toggle-controls'])

const toggleControls = () => {
  emit('toggle-controls')
}
</script>